<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .myContainer{
        display:flex;
        width:400px;
        height:100px;
        background-color: aqua;
        justify-content:space-evenly;
        align-items: flex-end;
    }/*justify-content:规定flex项目在容器主轴上的对齐方式；属性值有flex-start（项目从容器主轴起点开始排列）、flex-end（项目从容器主轴终点开
    始排列）center（项目在容器主轴上居中对齐）、space-between（项目在容器两端对齐，项目之间间隔相等）、space-around(每个项目两侧的间隔相等。
    故项目之间的间隔比项目与边框的间隔大一倍。）、space-evenly（每个项目两侧的间隔和项目与容器内容区域边界的间距相等。）；
    请注意，该属性最终呈现的项目对其效果，与主轴方向起点位置密切相关*/
    .myContainer>div{
        background-color: bisque;
        width:150px;
        height:50px;
        /*flex-grow: 1;*/
        flex-shrink: 1;
    }
    .myContainer>.item1{
        background-color: blueviolet;
        width:200px;
        height:60px;
        /*flex-grow: 2;*/
        flex-shrink: 2;
    }
    .myContainer>.item2{
        background-color:chocolate;
        height:30px
    }
</style>
<body>
    <div class="myContainer">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div>3</div>
    </div>
</body>
</html>